import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import type { OrderInfoPropsType, OrderInfoMonitorAlertsType } from './typings'
import {
  ElRow,
  ElCol,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
  ElSpace,
  ElLink,
  ElImage
} from 'element-plus'
import ProSaasTable from '~/components/ProSaasTable'
import SaasTitle from '~/components/SaasTitle'
import MapView from '../map/MapView'
import ProcessRecord from './public/ProcessRecord'
import useVuexGetters from '~/hooks/useVuexGetters'
import { GUTTER } from '~/utils/const'
import styles from '../../index.module.scss'

export default function OrderInfo(props: OrderInfoPropsType) {
  const orderState = useVuexGetters('order', ['orderStatusEnum', 'tenantUserEnum', 'deptTreeEnum'])

  const columns: TableColumnProps<OrderInfoMonitorAlertsType>[] = [
    {
      label: '警报时间',
      prop: 'reportTime',
      fixed: 'left'
    },
    {
      label: '设备名称',
      prop: 'deviceName'
    },
    {
      label: '警报名称',
      prop: 'alarmName'
    },
    {
      label: '设备类型',
      prop: 'deviceCategoryName'
    },
    {
      label: '警报值',
      prop: 'alarmValue'
    },
    {
      label: '回路开关',
      prop: 'loopName'
    },
    {
      label: '线路/相位',
      prop: 'loopPhase'
    },
    {
      label: '警报地点',
      prop: 'alarmAddress',
      showOverflowTooltip: true
    }
  ]
  return (
    <ElRow gutter={GUTTER}>
      <ElCol span={18}>
        <SaasTitle type="primary">
          <ElLink underline={false} class={styles['order-title']}>
            工单编号: {props?.orderCode}
          </ElLink>
        </SaasTitle>
        <br />
        {/* <ElDescriptions size="default">
          <ElDescriptionsItem label="工单编号">{props?.orderCode}</ElDescriptionsItem>
        </ElDescriptions> */}
        <ElDescriptions column={24} class={styles['order-info-descriptions']}>
          {/* <ElDescriptionsItem label="工单编号">{props?.orderCode}</ElDescriptionsItem> */}
          <ElDescriptionsItem label="创建部门">
            {orderState?.deptTreeEnum?.value?.[props?.createDept!] || props?.createDept}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="创建人">
            {orderState?.tenantUserEnum?.value?.[props?.createUser!] || props?.createUserName}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="创建时间">{props?.createTime}</ElDescriptionsItem>
          <ElDescriptionsItem align="right">
            {(props?.orderStatus || props?.orderStatus === 0) && (
              <ElTag {...({ type: props?.orderStatus === 0 && 'warning' } as any)}>
                {orderState?.orderStatusEnum?.value?.[props?.orderStatus!] ||
                  props?.orderStatusDesc}
              </ElTag>
            )}
          </ElDescriptionsItem>
        </ElDescriptions>

        <ElRow gutter={GUTTER}>
          <ElCol span={12}>
            <ElDescriptions column={1} class={styles['order-info-descriptions']}>
              <ElDescriptionsItem label="报修来源">{props.repairResourceName}</ElDescriptionsItem>
              <ElDescriptionsItem label="95598单号">{props.electrifiedCode}</ElDescriptionsItem>
              <ElDescriptionsItem label="指派处理部门">
                {orderState?.deptTreeEnum?.value?.[props?.handleDeptId!] || props?.handleDeptId}
              </ElDescriptionsItem>
              <ElDescriptionsItem label="故障地点">{props.defectAddress}</ElDescriptionsItem>
              <ElDescriptionsItem label="详细地址">{props.address}</ElDescriptionsItem>
              <ElDescriptionsItem label="工单类型">{props.orderUrgencyName}</ElDescriptionsItem>
              <ElDescriptionsItem label="报修内容">{props.suppleMemo}</ElDescriptionsItem>
              <ElDescriptionsItem label="计划完单时间">{props.planCompleteTime}</ElDescriptionsItem>
              <ElDescriptionsItem label="附图">
                <ElSpace wrap>
                  {props.annexUrlArray?.map((item, index) => (
                    <ElImage
                      class={styles['order-el-image']}
                      src={item}
                      previewSrcList={props.annexUrlArray}
                      initialIndex={index}
                      fit="cover"
                    />
                  ))}
                </ElSpace>
              </ElDescriptionsItem>
              <ElDescriptionsItem label="备注">{props.orderMemo}</ElDescriptionsItem>
            </ElDescriptions>
          </ElCol>
          <ElCol span={12}>
            {props.longitude! > 0 && props.latitude! > 0 && (
              <MapView
                id={styles['order-info-map']}
                orderMarker
                markers={{ lng: props.longitude, lat: props.latitude }}
              />
            )}
          </ElCol>
        </ElRow>
        <br />
        <SaasTitle type="primary">
          <ElLink underline={false} class={styles['order-title']}>
            监控报警详情
          </ElLink>
        </SaasTitle>
        <br />
        <ProSaasTable<OrderInfoMonitorAlertsType>
          columns={columns}
          data={props.alarmInfoVOList}
          border={false}
          needPagination={false}
        />
      </ElCol>
      <ElCol span={6}>
        <SaasTitle type="primary">
          <ElLink underline={false} class={styles['order-title']}>
            流程记录
          </ElLink>
        </SaasTitle>
        <br />
        <ProcessRecord processRecordList={props.processRecordList!} />
      </ElCol>
    </ElRow>
  )
}
